<template>
	<div>
		<Card>
			监理列表
			<Icon type="ios-arrow-forward" /> 新增监理师
		</Card>
		<Card>
			监理师姓名：<Input placeholder="请输入监理师姓名~" v-model="name" style="width: auto">
			<Icon type="ios-contact" slot="prefix" />
			</Input>
			<br /><br />
			监理师号码：<Input placeholder="请输入监理师手机号~" v-model="phone" style="width: auto">
			<Icon type="ios-call" slot="prefix" />
			</Input>
			<br /><br />
			监理师介绍：
			<br /><br />
			<Input v-model="info" type="textarea" :rows="4" placeholder="请输入监理师介绍~" />
			<br /><br />
			监理师照片：
			<br /><br />

			<div class="demo-upload-list" v-for="item in uploadList" :key="item.url">
				<template v-if="item.status === 'finished'">
					<img :src="item.url">
					<div class="demo-upload-list-cover">
						<Icon type="ios-eye-outline" @click.native="handleView(item.url)"></Icon>
						<Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
					</div>
				</template>
				<template v-else>
					<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
				</template>
			</div>

			<Upload ref="upload" :show-upload-list="false" :default-file-list="defaultList" :on-success="handleSuccess" :format="['jpg','jpeg','png']"
			 :max-size="2048" type="drag" action="http://upload.qiniup.com" :data="{ 'token': this.token }"
			 :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" :before-upload="handleBeforeUpload" style="display: inline-block;width:58px;">
				<div style="width: 58px;height:58px;line-height: 58px;">
					<Icon type="ios-camera" size="20"></Icon>
				</div>
			</Upload>
			<Modal title="View Image" v-model="visible">
				<!-- 预览时，获取当前图片路径 -->
				<img :src="imgName" v-if="visible" style="width: 100%">
			</Modal>
			<br /></br>
			<Button type="primary" @click="submitData">提交</Button>
		</Card>
	</div>
</template>

<script>
	import path from '@/api/path.js';
	import axios from '@/libs/api.request';
	let url = path.url;
	let imgUrl = path.upImg;
	export default {
		data() {
			return {
				name: "",
				phone: "",
				info: "",
				defaultList: [],
				imgName: '',
				visible: false,
				uploadList: [],
				token: ''
			}
		},
		methods: {
			handleView(name) {
				this.imgName = name
				this.visible = true;
			},
			handleRemove(file) {
				const fileList = this.$refs.upload.fileList;
				this.uploadList.splice(fileList.indexOf(file), 1);
			},
			handleSuccess(res, file) {
				file.url = imgUrl + res.key;
				this.uploadList.push(file);
			},
			handleFormatError(file) {
				this.$Notice.warning({
					title: '文件格式不正确',
					desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
				});
			},
			handleMaxSize(file) {
				this.$Notice.warning({
					title: '超出文件大小限制',
					desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
				});
			},
			handleBeforeUpload(e) {
				const check = this.uploadList.length < 1;
				if (!check) {
					this.$Notice.warning({
						title: '头像只需要一张哦~'
					});
				}
				return check;
			},
			// 提交数据给后台
			submitData() {
				let obj = {
					name: this.name,
					mobile: this.phone,
					userPicture: this.uploadList[0].url,
					userIntroduce: this.info
				}
				console.log(this.uploadList);
				axios.request({
					url: `${url}Supervision/addSupervision`,
					method: 'post',
					data: obj
				}).then(res=>{
					if ( res.data.status == 1 ) {
						this.$router.push({
							name: 'supervisorList'
						});
					} else {
						throw res.data.msg;
					}
				})
			}
		},
		created() {
			axios.request({
				url: `${url}Upload/getUpToken`,
				method: 'post'
			}).then(res => {
				if (res.data.status == 1) {
					this.token = res.data.content.uptoken;
				} else {
					throw res.data.msg
				}
			})
		}
	}
</script>

<style scoped="scoped">
	.demo-upload-list {
		display: inline-block;
		width: 60px;
		height: 60px;
		text-align: center;
		line-height: 60px;
		border: 1px solid transparent;
		border-radius: 4px;
		overflow: hidden;
		background: #fff;
		position: relative;
		box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
		margin-right: 4px;
	}

	.demo-upload-list img {
		width: 100%;
		height: 100%;
	}

	.demo-upload-list-cover {
		display: none;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, .6);
	}

	.demo-upload-list:hover .demo-upload-list-cover {
		display: block;
	}

	.demo-upload-list-cover i {
		color: #fff;
		font-size: 20px;
		cursor: pointer;
		margin: 0 2px;
	}
</style>
